<template>
    <div>
        <a-button @click="$router.go(-1)">返回</a-button>
        <div style="margin-top:24px">
            <a-form class="search-form" :form="form" @submit="handleSearch" layout="inline">
                <a-row :gutter="24">
                    <a-col :span="8">
                        <a-form-item label="商品编号" :labelCol="{span:8}" :wrapperCol="{span:16}">
                            <a-input v-decorator="[ 'no']"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="商品名称" :labelCol="{span:8}" :wrapperCol="{span:16}">
                            <a-input v-decorator="[ 'title']"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="售价" :labelCol="{span:8}" :wrapperCol="{span:16}">
                            <a-input v-decorator="[ 'price']"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="库存" :labelCol="{span:8}" :wrapperCol="{span:16}">
                            <a-input v-decorator="[ 'stock']"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="状态" :labelCol="{span:8}" :wrapperCol="{span:16}">
                            <a-select v-decorator="['state']" style="width: 100px">
                                <a-select-option :value="1">在售</a-select-option>
                                <a-select-option :value="2">下架</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row style="margin-top: 10px">
                    <a-col :span="24" :style="{ textAlign: 'right' }">
                        <a-button type="primary" html-type="submit">搜索</a-button>
                        <a-button :style="{ marginLeft: '8px' }" @click="handleReset">清除</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-table bordered :columns="columns" :dataSource="searchResult.length>0?searchResult:products" rowKey="id">
            <span slot="action" slot-scope="record">
                <a @click="onItemDetail(record)">详情</a>
                <a-divider type="vertical"/>
                <a @click="onItemModify(record)">修改</a>
                <a-divider type="vertical"/>
                <a @click="onItemDelete(record)">删除</a>
                <a-divider type="vertical"/>
            </span>
        </a-table>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { Modal } from 'ant-design-vue';
import _ from 'lodash';
export default {
    data() {
        return {
            searchResult: [],
            columns: [
                {
                    title: '商品编号',
                    key: 'no',
                    dataIndex: 'no',
                    align: 'center'
                },
                {
                    title: '商品名称',
                    key: 'title',
                    dataIndex: 'title',
                    align: 'center'
                },
                {
                    title: '价格',
                    key: 'price',
                    dataIndex: 'price',
                    align: 'center'
                },
                {
                    title: '使用年限',
                    key: 'durationString',
                    dataIndex: 'durationString',
                    align: 'center'
                },
                {
                    title: '库存',
                    key: 'stock',
                    dataIndex: 'stock',
                    align: 'center'
                },
                {
                    title: '状态',
                    key: 'stateString',
                    dataIndex: 'stateString',
                    align: 'center'
                },
                {
                    title: '备注',
                    key: 'remarks',
                    dataIndex: 'remarks',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            form: this.$form.createForm(this)
        };
    },
    methods: {
        handleSearch(e) {
            e.preventDefault();
            this.form.validateFields((error, values) => {
                if (values.price) {
                    values.price = parseFloat(values.price);
                }
                values = _.pickBy(values, _.identity);
                this.$store
                    .dispatch('filterProduct', values)
                    .then(result => {
                        this.searchResult = result;
                    })
                    .catch(reason => {
                        this.$error({ title: reason.message });
                    });
            });
        },

        handleReset() {
            this.form.resetFields();
            this.searchResult = [];
        },
        onItemDetail(item) {
            this.$router.push({
                name: 'ProductDetail',
                query: {
                    id: item.id
                }
            });
        },
        onItemModify(item) {
            this.$router.push({
                name: 'ModifyProduct',
                query: {
                    id: item.id
                }
            });
        },
        onItemDelete(item) {
            this.$confirm({
                title: '确定要删除' + item.title + '吗？',
                onOk: () => {
                    this.$store
                        .dispatch('deleteProduct', item)
                        .then(() => {
                            this.$success({ title: item.title + '已经删除' });
                        })
                        .catch(reason => {
                            this.$error({ title: item.title + '删除失败' });
                        });
                }
            });
        }
    },
    computed: {
        ...mapGetters(['products'])
    }
};
</script>
<style lang="stylus" scoped>
.search-form {
    margin: 0px 10px 20px 0px;
}
</style>
